<template>
	<view class="transferRecord">
		<view class="nodata" v-if="nodata">暂无记录...</view>
		<view class="main" v-if="list.length > 0">
			<view class="header">
				审核通过后，对应发票保证金将退还到钱包
			</view>
			<view class="list">
							<!-- <radio-group @change="radioChange" class="radioGroup"> -->
							<view class="radioGroup">
								
									<view class='item' v-for="(item,index) in list" :key="index" :class="{grayItem:item.status=='verify'}" v-if="item.status!=='success'">
										<label  @click="onCheck(item)">
											<radio :value="item.securityMoney+''" :checked="item.checked" :disabled = "item.status=='verify'" color="#ff1268" />
											<view class="right">
												<view class="time">
													日期：{{item.time}}
												</view>
												<view class="money">
													转账金额：{{item.money}}元
												</view>
												<view class="securityMoney">
													发票保证金：<text class="red">{{item.securityMoney}}元</text>
												</view>
												<view class="status" v-if="item.status=='verify'">
													审核中
												</view>
											</view>
										</label>
									</view>
									<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
									<view class="uni-loadmore loadfinished" v-if="finished">--没有更多数据了--</view>
							<!-- </radio-group> -->
							</view>
			</view>
			<view class="footerFixed">
				<view class="left" v-show="countMoney">
					共计<text class="red">{{countMoney}}</text>元保证金
				</view>
				<view class="nextBtn" @click="nextBtn" v-if="countMoney">
					下一步
				</view>
				<view class="nextBtn grayBtn" v-if="!countMoney">
					下一步
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
	data() {
		return {
			checkedValue: '',
			loading: false,
			countMoney: 0,
			nodata: false,
			finished: false,
			loadMoreText: '加载中...',
			showLoadMore: false,
			flows: [],
			params: {
				start: 0,
				limit: 20,
				token: util.getUserToken()
			},
			listObj: {},
			list: []
		};
	},
	onLoad() {
		this.getList();
	},
	computed: {},
	onPullDownRefresh() {
		this.params.start = 0;
		this.getList();
		this.finished = false;
	},
	methods: {
		onCheck(item) {
			if (item.status !== 'verify') {
				item.checked = !item.checked;
				this.countMoney = 0;
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].checked) {
						this.countMoney += this.list[i].securityMoney;
					}
				}
			}
		},
		nextBtn() {
			this.flows = [];
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].checked) {
					let obj = {};
					obj.createTime = this.list[i].createTime;
					obj.fee = this.list[i].securityMoney;
					obj.totalMoney = this.list[i].money;
					obj.flowId = this.list[i].flowId;
					this.flows.push(obj);
				}
			}
			console.log(this.flows);
			let flowsTring = JSON.stringify(this.flows);
			console.log(flowsTring);
			uni.navigateTo({
				url: './invoiceInfo?countMoney=' + this.countMoney + '&flowsTring=' + flowsTring
			});
		},
		// 		radioChange(e) {
		// 			console.log('checkbox发生change事件，携带value值为：' + e.detail.value);
		// 			this.checkedValue = e.detail.value;
		// 		},
		getList() {
			//             uni.showLoading({
			//                 title: '正在加载...'
			//             });
			this.loading = true;

			util.ajax(
				'userRewardWithdrawFlows',
				this.params,
				data => {
					// uni.hideLoading();
					let json = data.data;
					if (json.status) {
						if (0 == this.params.start) {
							this.listObj = {};
							this.list = [];
						}
						for (let i = 0; i < json.data.length; i++) {
							let item = json.data[i];
							if (!this.listObj[item.unionId]) {
								this.listObj[item.unionId] = {};
							}
							this.listObj[item.unionId].checked = false;
							if (item.operateType.value == 'rewardWithdraw') {
								this.listObj[item.unionId].offset = util.showDecimal(
									Math.abs(item.offset)
								);
								this.listObj[item.unionId].time = util.parseTime(item.createTime);
								this.listObj[item.unionId].createTime = item.createTime;
							}
							if (item.operateType.value == 'rewardWithdrawFee') {
								this.listObj[item.unionId].securityMoney = util.showDecimal(
									Math.abs(item.offset)
								);
								this.listObj[item.unionId].status = item.flowStatus.value;
								this.listObj[item.unionId].flowId = item.id;
							}
							this.listObj[item.unionId].money = this.listObj[item.unionId].offset + this.listObj[item.unionId].securityMoney
						}

						// console.log(this.listObj);

						for (let item in this.listObj) {
							this.list.push(this.listObj[item]);
						}
						this.list.sort(function(a, b) {
							return b.createTime > a.createTime ? 1 : -1;
						});
						// console.log(this.list);
						uni.stopPullDownRefresh();

						if (this.list.length === 0) {
							this.nodata = true; //无数据
						} else {
							this.nodata = false;
						}
						// 加载状态结束
						this.loading = false;
						if (json.data.length < this.params.limit) {
							this.finished = true;
							this.showLoadMore = false;
						}
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					console.log(data);
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		}
	},
	components: {
		uniIcon
	}
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
/*通用 */
.loadfinished {
	padding: 15upx 0;
	color: #cccccc;
	justify-content: center;
	background-color: rgb(245, 245, 245);
}
.transferRecord {
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: auto;
	.nodata {
		width: 100%;
		font-size: 28upx;
		color: #cccccc;
		margin-top: 60%;
		justify-content: center;
		display: flex;
		background-color: rgb(245, 245, 245);
	}
	.main {
		flex: 1;
		flex-direction: column;
		width: 100%;
		height: auto;
		.header {
			height: 80upx;
			align-items: center;
			padding-left: 30upx;
		}

		.list {
			background: white;
			margin-bottom: 124upx;
			.radioGroup {
				flex: 1;
				flex-direction: column;
				height: auto;
				width: 100%;
				.item {
					align-items: center;
					width: 100%;
					flex-direction: row;
					padding: 30upx;
					box-sizing: border-box;
					border-bottom: 1upx solid #f0f0f0;
					label {
						display: inline-flex;
						align-items: center;
						width: 100%;
						flex-direction: row;
						.right {
							flex-direction: column;
							view {
								margin-bottom: 15upx;
							}
							view:last-child {
								margin-bottom: 0;
							}
							.red {
								color: #ff1268;
							}
						}
					}
				}
				.grayItem {
					color: gray;
					.status {
						color: green;
					}
				}
			}
		}
		.footerFixed {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 124upx;
			background: white;
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 0 0.277778rem #e8e6e6;
			.left {
				align-items: center;
				font-size: 28upx;
				.red {
					color: #ff1268;
				}
			}
			.nextBtn {
				height: 90upx;
				width: 220upx;
				background: #ff1268;
				color: white;
				align-items: center;
				justify-content: center;
				border-radius: 5upx;
			}
			.grayBtn {
				position: absolute;
				right: 30upx;
				background: rgb(210, 210, 210);
				color: white;
			}
		}
	}
}
</style>
